import React from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { TabBar, SafeArea, ConfigProvider } from 'antd-mobile'
import { AppOutline, UnorderedListOutline, UserOutline } from 'antd-mobile-icons'

const tabs = [
  { key: '/app/message', title: '发条消息', icon: <AppOutline /> },
  { key: '/app/tutorial', title: '使用教程', icon: <UnorderedListOutline /> },
  { key: '/app/profile', title: '我的', icon: <UserOutline /> },
]

export default function TabLayout() {
  const { pathname } = useLocation()
  const navigate = useNavigate()

  const activeKey = pathname.startsWith('/app') ? pathname : '/app/message'

  return (
    <ConfigProvider theme={{ colorPrimary: '#00b578' }}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
        <div style={{ flex: 1, overflow: 'auto', paddingBottom: 56 }}>
          <Outlet />
        </div>
        <div style={{ position: 'fixed', left: 0, right: 0, bottom: 0, background: '#fff' }}>
          <TabBar activeKey={activeKey} onChange={key => navigate(key)}>
            {tabs.map(item => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
          <SafeArea position='bottom' />
        </div>
      </div>
    </ConfigProvider>
  )
}
